<template>
  <div class="main-container-app">
    <el-row class="form-contain">
      <el-form :model="queryParam" ref="queryParam" :inline="true" label-width="72px" :label-position="'left'">
        <el-row class="search-title">条件检索</el-row>
        <el-form-item prop="roadName">
          <el-input prefix-icon="el-icon-search" v-model="queryParam.roadName"
                    @clear="queryFellRoad" clearable placeholder="路段名称/拼音首字母"/>
        </el-form-item>
        <el-form-item>
          <el-button class="btn-search" @click="queryFellRoad" type="primary">搜索</el-button>
        </el-form-item>
        <collapse-vertical>
          <el-row v-show="item3Seem">
            <el-row>
              <el-form-item prop="department" label="所属单位">
                <el-input @focus="queryDepartment()" readonly v-model="queryParam.department"
                          placeholder="所属单位"></el-input>
              </el-form-item>
              <el-form-item prop="park" label="所在停车场">
                <el-input @focus="queryPark()" readonly v-model="queryParam.park" placeholder="所在停车场"></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item prop="roadStatus" label="路段状态">
                <el-radio-group v-model="queryParam.roadStatus" clearable>
                  <el-radio v-for="item in fellRoadOptions" :key="item.value" :label="item.value">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row>
                <el-form-item prop="isFan" label="是否示范路">
                  <el-radio-group v-model="queryParam.isFan" clearable>
                    <el-radio v-for="item in fanRoadOptions" :key="item.value" :label="item.value">{{item.label}}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item>
                  <el-button @click="queryFellRoad()" class="btn-mini-form">提交
                  </el-button>
                  <el-button @click="resetFellRoad('queryParam')" class="btn-mini-form">重置
                  </el-button>
                </el-form-item>
            </el-row>
          </el-row>
        </collapse-vertical>
        <el-row style="text-align: center">
          <el-button style="border: none;background-color: transparent" size="small"
                     @click="item3Seem = !item3Seem;isDisplay=!isDisplay"
                     :icon="isDisplay?iconUp:iconDown"></el-button>
        </el-row>
      </el-form>
    </el-row>
    <div class="table-contain">
      <el-container>
        <el-header>
          <p>收费道路列表</p>
        </el-header>
        <el-main>
          <el-row class="btn-group">
            <el-button class="btn" @click.native="openDialog"><span>添加</span>
              <i class="el-icon-plus"></i>
            </el-button>
            <!--<el-button class="btn" @click.native="editDialog"><span>编辑</span>-->
              <!--<i class="el-icon-edit"></i>-->
            <!--</el-button>-->
            <el-button class="btn" @click.native="deleteCharge"><span>删除</span>
              <i class="el-icon-delete"></i>
            </el-button>
          </el-row>
          <el-table v-loading="tollSelectLoading"
                    :data="tollList"
                    width="100%"
                    @row-dblclick="findBerths"
                    @selection-change="selectionChargeUnit"
                    element-loading-text="给我一点时间"
                    highlight-current-row stripe>
            <el-table-column fixed type="selection" align="center" width="50"></el-table-column>
            <el-table-column fixed align="center" label="所在车场" sortable prop="unit_parkname">
              <template slot-scope="scope">
                <span>{{scope.row.unit_parkname}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="收费单位" sortable prop="unit_sfdwname">
              <template slot-scope="scope">
                <span>{{scope.row.unit_sfdwname}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="收费路段编号" sortable prop="unit_no">
              <template slot-scope="scope">
                <span>{{scope.row.unit_no}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="收费路段名称" width="200" sortable prop="unit_name">
              <template slot-scope="scope">
                <span>{{scope.row.unit_name}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="泊位总数" width="120" sortable prop="unit_placenum">
              <template slot-scope="scope">
                <span>{{scope.row.unit_placenum}}</span>
              </template>
            </el-table-column>
            <el-table-column sortable align="center" label="收费路段状态" width="120" sortable prop="unit_status">
              <template slot-scope="scope">
                <span>{{scope.row.unit_status === '1'?'启用':'未启用'}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="负责人" width="100" sortable prop="unit_headername">
              <template slot-scope="scope">
                <span>{{scope.row.unit_headername}}</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" width="100" label="操作">
              <template slot-scope="scope">
                <el-dropdown trigger="click" @command="handleCommand">
                  <el-button class="btn-drop-down" @click="changeRow(scope.row)">
                    <i class="el-icon-arrow-down"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="edit">编辑</el-dropdown-item>
                    <el-dropdown-item command="del">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-footer>
          <el-pagination background
                         :total="total"
                         :page-sizes="[10,20,30,50]"
                         :page-size="listQuery.limit"
                         :current-page="listQuery.page"
                         @size-change="tollHandlerSizeChange"
                         @current-change="tollHandlerCurrentChange"
                         layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </el-footer>
        <charge-unit-add :addChargeVisible.sync="chargeUnitOperate.dialogAddChargeVisible"
                         @addAfterQueryChargeUnit="queryFellRoad">
        </charge-unit-add>
      </el-container>
    </div>

    <charge-unit-edit :editChargeVisible.sync="chargeUnitOperate.dialogEditChargeVisible"
                      @addAfterQueryChargeUnit="queryFellRoad"
                      :editRow="changeVal">
    </charge-unit-edit>

    <department :extraParam="departmentDialog.extraParam"
                :dialogDwVisible.sync="departmentDialog.dialogDwVisible"
                :dwLoading.sync="departmentDialog.dwLoading"
                @setDepartment="selectDwname3"></department>

    <!-- 选择车场弹出框 -->
    <parking-dialog :parkingVisible.sync="parkDialog.dialogParkvisible"
                    @parkName="selectParkName"></parking-dialog>

    <el-dialog title="泊位信息" :visible.sync="berthVisible"
               :before-close="handleBerthClose" center>
      <el-table :data="berth.berthList" ref="multipleTable"
                v-loading="berth.berthLoading"
                element-loading-text="给我一点时间"
                border fit highlight-current-row stripe>
        <el-table-column align="center" label="所在停车场" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.place_parkname}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="泊位编号" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.place_id}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="所在路段" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.place_chargeunitname}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="路段内编号" width="150">
          <template slot-scope="scope">
            <span>{{scope.row.place_no}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="收费单位" width="200">
          <template slot-scope="scope">
            <span>{{scope.row.place_sfdwname}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="泊位类型" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.place_type === '1' ? '真实泊位':'虚拟泊位'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="泊位状态" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.place_status === '1' ? '启用':'未启用'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="在停车辆">
          <template slot-scope="scope">
            <span>{{scope.row.place_car}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="泊位尺寸">
          <template slot-scope="scope">
            <span>{{scope.row.place_size}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="备注">
          <template slot-scope="scope">
            <span>{{scope.row.place_remark}}</span>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-berth" style="text-align: right">
        <el-pagination background small :total="berth.total" :page-sizes="[10,20,30,50]"
                       :page-size="berthQuery.limit"
                       :current-page="berthQuery.page"
                       @size-change="berthHandlerSizeChange"
                       @current-change="berthHandlerCurrentChange"
                       layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  /* eslint-disable */
  import {
    selectChargeUnits,
    deleteChargesUnit,
    selectBerthByChargeUnitNo
  } from '../../api/parkingResource/tollSelection'
  import ParkingDialog from '../operatingManagement/parkingflowChild/parkingDialog'
  import ChargeUnitAdd from './chargesunitoperate/chargeUnitAdd'
  import ChargeUnitEdit from './chargesunitoperate/editChargesUnit'
  import CollapseVertical from '../../utils/collapseVertical'
  import Department from '../common/sysorg/department'

  export default {
    components: {
      Department,
      ParkingDialog,
      ChargeUnitAdd,
      ChargeUnitEdit,
      CollapseVertical
    },
    created() {
      this.queryFellRoad()
    },
    mounted() {
      selDictonary().then(content => {
        for (var i = 0; i < content.length; i++) {
          if (content[i].id === 'roadkind') {
            this.fanRoadOptions = content[i].comboboxDetailList
          } else if (content[i].id === 'enableflag') {
            this.fellRoadOptions = content[i].comboboxDetailList
          }
        }
      })
    },
    data() {
      return {
        changeVal: '',
        iconUp: 'el-icon-arrow-up',
        iconDown: 'el-icon-arrow-down',
        isDisplay: false,
        item3Seem: false,
        tollSelectLoading: false,
        tollList: [],
        selectionChargeUnitArray: [],
        total: 0,
        queryParam: {
          roadName: '',
          department: '',
          department_no: '',
          park: '',
          park_no: '',
          roadStatus: '',
          isFan: ''
        },
        listQuery: {
          page: 1,
          limit: 20
        },
        fellRoadOptions: [
          {value: '1', label: '启用'},
          {value: '2', label: '未启用'}
        ],
        fanRoadOptions: [
          {value: '1', label: '是'},
          {value: '2', label: '否'}
        ],

        chargeUnitOperate: {
          dialogAddChargeVisible: false,
          dialogEditChargeVisible: false
        },
        parkDialog: {
          dialogParkvisible: false
        },
        departmentDialog: {
          extraParam: {
            lovtype: 'orglevel',
            level: '4',
            orgtype: null,
            p_org: null,
            getSelfOrg: null
          },
          dialogDwVisible: false,
          dwLoading: false
        },
        berthVisible: false,
        berth: {
          total: 0,
          berthLoading: true,
          berthList: [],
          berthChargeUnit: ''
        },
        berthQuery: {
          page: 1,
          limit: 10
        }
      }
    },
    methods: {
      handleCommand(val) {
        const no = this.changeVal.unit_no
        if (val === 'edit') {
          // this.selectionChargeUnitArray = this.changeVal
          this.chargeUnitOperate.dialogEditChargeVisible = true
        }
        if (val === 'del') {
          const delArray = []
          this.$confirm('此操作将删除该收费路段, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            delArray.push(no)
            deleteChargesUnit(delArray).then(
              () => {
                this.delSuccess()
                this.queryFellRoad()
              },
              (error) => {
                console.log(error.responseJSON.code)
              }
            )
            this.queryFellRoad()
          }).catch(() => {
          })
        }
      },
      changeRow(val) {
        this.changeVal = Object.assign({}, val) // copy obj
      },
      /* 查询收费路段 */
      queryFellRoad() {
        this.tollSelectLoading = true
        selectChargeUnits(this.listQuery, this.queryParam).then(
          res => {
            this.tollList = res.list
            this.total = res.count
            this.tollSelectLoading = false
          }
        )
      },
      /* 重置收费路段 */
      resetFellRoad(queryParam) {
        this.$refs[queryParam].resetFields()
        this.queryParam.department_no = ''
        this.queryParam.park_no = ''
        this.queryFellRoad()
      },
      /* 分页查询 */
      tollHandlerCurrentChange(num) {
        this.listQuery.page = num
        this.queryFellRoad()
      },
      /* 页码显示数量变更 */
      tollHandlerSizeChange(num) {
        this.listQuery.limit = num
        this.queryFellRoad()
      },

      /* 打开添加窗口 */
      openDialog() {
        if (this.chargeUnitOperate.dialogAddChargeVisible) {
          this.chargeUnitOperate.dialogAddChargeVisible = false
        }
        this.chargeUnitOperate.dialogAddChargeVisible = true
      },
      /* 打开编辑窗口 */
      editDialog() {
        if (this.selectionChargeUnitArray.length !== 1) {
          this.openSelectionError()
          return
        }
        if (this.chargeUnitOperate.dialogEditChargeVisible) {
          this.chargeUnitOperate.dialogEditChargeVisible = false
        }
        this.chargeUnitOperate.dialogEditChargeVisible = true
      },
      /* 删除收费单位 */
      deleteCharge() {
        if (this.selectionChargeUnitArray.length === 0) {
          this.deleteSelectionError()
          return
        }
        this.$confirm('此操作将删除该收费路段, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const delArray = []
          this.selectionChargeUnitArray.forEach((value, index) => {
            delArray.push(value.unit_no)
          })
          deleteChargesUnit(delArray).then(
            () => {
              this.delSuccess()
              this.queryFellRoad()
            },
            (error) => {
              console.log(error.responseJSON.code)
            }
          )
          this.queryFellRoad()
        }).catch(() => {
        })
      },
      findBerths(row, event) {
        this.berth.berthChargeUnit = ''
        this.berthVisible = true
        this.berth.berthChargeUnit = row.unit_no
        this.getBerthsByChargeUnit(this.berth.berthChargeUnit)
      },
      getBerthsByChargeUnit(chargeUnit) {
        if (chargeUnit === '') {
          chargeUnit = '######'
        }
        selectBerthByChargeUnitNo(this.berthQuery, chargeUnit).then(
          res => {
            this.berth.berthList = res.list
            this.berth.total = res.count
            this.berth.berthLoading = false
          }
        )
      },
      handleBerthClose(done) {
        this.berthVisible = false
        this.berthQuery.page = 1
        this.berthQuery.limit = 10
      },
      /* 选择收费单位 */
      selectionChargeUnit(selection) {
        this.selectionChargeUnitArray = selection
      },

      /* 错误消息提示 */
      openSelectionError() {
        this.$message.error('请选择一条数据进行修改')
      },
      deleteSelectionError() {
        this.$message.error('请至少选择一条数据进行删除')
      },
      /* 获取停车场信息======================================*/
      queryPark() {
        this.parkDialog.dialogParkvisible = true
      },
      selectParkName(val) {
        this.queryParam.park = val.parkname
        this.queryParam.park_no = val.parkno
      },
      /* 获取单位信息========================================*/
      queryDepartment() {
        this.departmentDialog.dialogDwVisible = true
      },
      /* 接收子组件传递过来的弹出框的单位名称 */
      selectDwname3: function (val) {
        this.queryParam.department = val.orgname
        this.queryParam.department_no = val.orgno
      },
      delSuccess() {
        this.$message.success('删除成功')
      },
      /* 泊位分页操作*/
      berthHandlerCurrentChange(num) {
        this.berthQuery.page = num
        this.getBerthsByChargeUnit(this.berth.berthChargeUnit)
      },
      berthHandlerSizeChange(num) {
        this.berthQuery.limit = num
        this.getBerthsByChargeUnit(this.berth.berthChargeUnit)
      }
    }
  }
</script>

<style scoped>
  .btn-group > .el-button span {
    display: none;
  }

  .btn-group > .el-button:hover {
    background-color: #409EFF;
  }

  .btn-group > .el-button:hover span {
    display: block;
  }

  .btn-group > .el-button:hover i {
    display: none;
  }
</style>
